<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>课程管理</title>
		<link rel="stylesheet" href="../../../resources/css/coursemanage/coursemanage.css" />
		<link rel="stylesheet" href="../../../resources/layui/css/layui.css" />
		<script type="text/javascript" src="../../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../../resources/layui/layui.js"></script>
	</head>
	<style>
		.layui-table-cell {
			height: 100%;
			max-width: 100%;
		}
	</style>

	<body>
		<div class="main">
			<div class="layui-input-inline">
				<button id="addcourse" class="layui-btn layui-btn-md layui-btn-danger">添加课程</button>
			</div>
			<form action="" method="post" class="layui-form" style="float: right;">
				<div class="layui-inline">
					<input type="text" name="course_name" placeholder="请输入课程" class="layui-input" />
				</div>
				<button class="layui-btn" lay-submit data-type="reload" lay-filter="search" id="search">搜索</button>
			</form>

			<table id="coursetable" lay-filter="shop"></table>
		</div>
		<script>
			layui.use('table', function() {
				var table = layui.table;
				table.render({
					elem: '#coursetable',
					url: '/course/queryAllCourse.action',
					height: '480',
					limit: 6,
					limits: [6, 10, 20],
					page: true,
					cols: [
						[{
							type: 'checkbox',
							align: 'center'
						}, {
							field: 'courseId',
							width: 100,
							title: '课程ID',
							sort: true,
							align: 'center'
						}, {
							field: 'courseName',
							width: 200,
							title: '课程名称',
							align: 'center'
						}, {
							field: 'courseLevel',
							width: 100,
							title: '课程级别',
							align: 'center'
						}, {
							field: 'courseIntergal',
							width: 150,
							title: '课程所需积分',
							sort: true,
							align: 'center'
						}, {
							field: 'coursePicture',
							title: '课程图片',
							MinWidth: 200,
							templet: '<div><img src="{{ d.course_picture}}" ></div>',
							style: 'height:60px'
						}, {
							field: 'courseTypeId',
							width: 150,
							title: '课程分类',
							align: 'center'
						}, {
							field: 'courseSatte',
							width: 150,
							title: '课程状态',
							sort: true,
							align: 'center'
						}, {
							field: 'courseDescribe',
							width: 350,
							title: '课程描述',
							sort: true,
							align: 'center'
						}, {
							field: 'studyNumber',
							width: 100,
							title: '学习人数',
							sort: true,
							align: 'center'
						}, {
							title: '操作',
							width: 178,
							align: 'center',
							toolbar: '#toolbar'
						}]
					],
					done: function() {

					}

				});
				table.on('tool(shop)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;
					var tr = obj.tr;
					if(layEvent === 'del') { //删除
						layer.confirm('真的删除该商品吗', function(index) {
							obj.del();
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if(layEvent === 'edit') { //编辑
						layer.alert('编辑行：<br>' + JSON.stringify(data))
						//do something
						//同步更新缓存对应的值
						//						obj.update({
						//							username: '123',
						//							title: 'xxx'
						//						});
					}
				});
			});
		</script>
		<script type="text/html" id="toolbar">
			<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon-set layui-icon"></i>编辑</a>

			<a class="layui-btn layui-btn-danger layui-btn-xs " lay-event="del"><i class="layui-icon-close layui-icon"></i>删除</a>
		</script>

		<script>
			layui.use('layer', function() {
				var layer = layui.layer;
				$('#addgoods').on('click', function() {
					var index = layer.open({
						type: 2,
						title: '添加商品',
						shadeClose: false, //点击遮罩关闭层
						area: ['900px', '620px'],
						content: '/pages/admin/shop/addshops.html'
					});
				});
			});
		</script>
	</body>

</html>